<template>
     <div class="article_details_opinion_box outer_shadows" >
         <p class="article_details_opinion_title">意见收集</p>
         <ul>
             <li v-for="(item,index) in opinionList" :key="index">
                 <span @click="opinion(item.msg)">{{item.url}}</span>
                 <p class="article_details_opinion_msg"> {{item.msg}}</p>
             </li>
         </ul>
         <p class="article_details_opinion_preface">请对我们做个评价,谢谢！</p>
         <div class="article_details_opinion_content" v-if="content">
             <input type="text" placeholder="请留下您宝贵的意见" v-model.trim="opinionData.content">
             <br>
             <button @click="opinion_sub">提交({{opinionData.msg}})</button>
         </div>
     </div>
</template>

<!--意见收集-->
<script setup>
import {ref} from "vue";
import store from "@/store/index.js";

//自定义emit事件
const emit = defineEmits(['optionShutDown']);

// 推荐选项列表数据
const opinionList = ref([
    {url:"😅",msg:"不推荐"},
    {url:"😀",msg:"一般"},
    {url:"😄",msg:"推荐"},
    {url:"😁",msg:"非常推荐"},
]);

// 需要提交的意见内容
const opinionData = ref({
    msg:"",
    content:""
});

// 是否显示填写框
const content = ref(false);

// 选项的点击事件
const opinion=(msg)=>{
   if( opinionData.value.msg === msg){
       return;
   }
    content.value = false;
   setTimeout(()=>{
       content.value = true;
       opinionData.value.msg = msg;
   },200);
}

// 提交意见事件
const opinion_sub =()=>{
    if(!opinionData.value.content){
        store.commit("info_sub",{msg:"内容不能为空！",type:"warn"});
        return;
    }

    store.commit("info_sub",{msg:"十分感谢您的建议！",type:"normal"});
    opinionData.value.content = '';
    emit('optionShutDown',false);
    window.localStorage.setItem("opinion_collection",JSON.stringify(true));
}

</script>

<style scoped>
.article_details_opinion_box{
    width: 100%;
    padding-bottom: 10px;
    box-shadow: 0 0 3px rgba(96, 97, 98, 0.12);
}
.article_details_opinion_title{
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #afcae5;
    color: white;
}
.article_details_opinion_msg{
    font-size: 12px;
}
ul{
    list-style: none;
    display: grid;
    align-items: center;
    padding: 10px 5px;
    justify-content: space-around;
    grid-template-columns: repeat(4,25%);
}
li{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
li span{
   font-size: 20px;
    cursor: pointer;
}
img:hover{
    opacity: .8;
}
.article_details_opinion_content{
    text-align: center;
    animation: opinion_content .3s ease-in-out 0s 1 forwards;
}

.article_details_opinion_content input{
    width: 80%;
    height: 30px;
    outline: none;
    margin-bottom: 10px;
    text-indent: 0.2rem;
    border: 1px solid rgba(96, 97, 98, 0.5);
}
.article_details_opinion_content button{
    outline: none;
    height: 30px;
    width: 80%;
    background: #6da6e1;
    color: #f6f7f8;
    border: 0;
}
.article_details_opinion_content button:hover{
    cursor: pointer;
    opacity: .9;
}
.article_details_opinion_preface{
    font-size: 12px;
    margin: 5px 0 10px 20px;
}

@keyframes opinion_content {
    0%{
        transform: scale(0);
    }
    70%{
        transform: scale(1.05);
    }
    80%{
        transform: scale(1);
    }
    90%{
        transform: scale(1.02);
    }
    100%{
        transform: scale(1);
    }
}
</style>